
// 轮播业务
(function(){
	let oBannerList = document.querySelector('.banner-list'); 
	let oNumber = document.querySelector('.number'); 
	
	// 请求轮播数据
	wj.ajax({
		url: BASE_URL + '/api_banner',
		data : {bannerId: 1},
		success(res){
			//验证
			if(res.code != 0){
				console.log(res);
				return;
			};
			
			// 轮播项
			let strLi = '';
			// 序号
			let strSpan = '';
			res.data.forEach(item => {
				//累加结构和数据
				strLi += `
					<li><a href="product.html?goodsId=${item.goods_id}&catId=${item.cat_id}"><img src="${item.goods_thumb}" alt="" /></a></li>
				`;
				strSpan += '<span></span>';
			});
			// 添加到页面
			oBannerList.innerHTML = strLi;
			oNumber.innerHTML = strSpan;
			
			//添加到页面之后，才能开始做轮播效果功能
			//可以调用轮播的方法
			banner();
			
		}
	});
	
	// 轮播
	function banner(){
		// 点击上一张
		// 点击下一张
		// 点击序号
		// 自动播放
		// 移入移出
		
		//获取
		let oBanner = document.querySelector('.banner');	
		let oNext = document.querySelector('.next');
		let oPrev = document.querySelector('.prev');
		let aLi = oBanner.querySelectorAll('.banner-list li');
		let oNumber = document.querySelector('.number');
		let aSpan = oNumber.querySelectorAll('.number span');
			
		//信号量，下标
		let n = 0;
		
		//下一张
		oNext.onclick = rightBtn;
		
		//封装自动播放 和 下一张业务
		function rightBtn(){
			//0 1 2 3 0  业务逻辑
			n++;
			//验证
			n = n >= aLi.length ? 0 : n;
			
			//调用方法
			play();
		};
		
		//自动播放,开定时器
		let timer = setInterval(rightBtn, 2000);
		
		//上一张
		oPrev.onclick = function(){
			//3210  3210 业务逻辑
			n--;
			//验证
			n = n < 0 ? aLi.length - 1 : n;
			
			//调用方法
			play();
		}
		
		// 点击小圆点, 批量监听
		for(let m = 0; m < aSpan.length; m++){
			
			//监听事件
			aSpan[m].onclick = function(){
				//当前点击的谁？？？i
				//设置联动
				n = m;
				//调用设置方法
				play();				
			}
			
		};
		
		// 鼠标移入移出
		oBanner.onmouseover = function(){
			//清除定时器
			clearInterval(timer);
		};
		
		oBanner.onmouseout = function(){
			//开定时器
			timer = setInterval(rightBtn, 2000);
		};
		
		//封装设置的方法
		function play(){
			//排它
			for(let i = 0; i < aLi.length; i++){
				//隐藏所有li
				aLi[i].style.display = 'none';
				//所有小圆点为 白色
				aSpan[i].style.background = '#ccc';
			}
			//设置当前显示
			aLi[n].style.display = 'block';
			aSpan[n].style.background = '#666';
		};
		
	};
	
})();

// 热门商品业务
(function(){
	let oBaseGoodsContent = document.querySelector('.base-goods-content');
	let oMore = document.querySelector('.more-btn');
	
	// 页
	let page = 1;
	// 数量
	let pagesize = 3;
	
	//默认调用一次
	goodsRender(page, pagesize);
	
	// 点击更多
	let lock = false;
	oMore.onclick = function(){
		// 节流模型
		if(lock) return;
		// 上锁
		lock = true;
		//加载第2页面
		page++;
		
		goodsRender(page, pagesize);
	};
	
	// 封装请求数据和DOM渲染的方法
	function goodsRender(page, pagesize){
		//获取数据
		wj.ajax({
			url: BASE_URL + '/api_goods',
			data: {page, pagesize},
			success(res){
				console.log(res);
				//验证
				if(res.code != 0){
					console.log(res);
					return;
				};
				
				//组装结构
				res.data.forEach(item => {
					// 创建外层 li
					let li = document.createElement('li');
					// 里面使用字符串进行赋值
					li.innerHTML = `
						<div class="goods-up">
							<img src="${item.goods_thumb}" alt="" />			
							
							<a href="product.html?goodsId=${item.goods_id}&catId=${item.cat_id}" class="goods-mask">
								<p>¥${item.price}</p>
								<p>${item.goods_name}</p>
								<p>${item.goods_desc}</p>
							</a>
						</div>
						
						<div class="brand-down">
							<div>
								<img src="${item.brand_thumb}" alt="" />
								<span>${item.brand_name}</span>
							</div>
							<div>
								<span>${item.goods_number}</span>
								<span class="iconfont icon-aixin_shixin"></span>
							</div>			
						</div>
					`;
					
					// 添加到页面
					//每遍历到一个，添加一个
					oBaseGoodsContent.appendChild(li);
					
				});
				
				// 开锁
				lock = false;
			},		
		});
	};
	
	
	
})();